<template>
	<view class="templet-view">
		<view class="center-view">
			<input placeholder="模板名称" class="theme-input" v-model="name"/>
			<textarea v-model="intro" placeholder="模板介绍(100字以内)" class="theme-input" rows="2" maxlength="100"></textarea>
			<view class="visibility theme-input">
				<text class="vis-desc">是否所有人可见：</text><switch class="vis-switch" :checked="pubBool" @change="changePubBool"/>
			</view>
			<zEnrollItemPanel class="templet-board" :questions="questions" :isEdit="true"/>
			
			<button type="primary" class="templet-button" style="background-color:green" @click="submit">提交</button>
		</view>	
	</view>
</template>


<script>
	import zEnrollItemPanel from "../../components/basic/zenrollitempanel";
	export default {
		components : {
			zEnrollItemPanel
		},
		data: function () {
			return {
				name : "",
				intro : "",
                questions : [],
				pubBool : false
			}
		},
		onLoad : function(){
			// console.log(this.enrollData.checked)
			// this.users.push({'username':'test','name':'test','intro':'this is a suck introduction.','status':'success'})
		},
		methods: {
			submit : function(){
				if(this.name == '' || this.intro == ''){
					uni.showModal({
						title : '错误',
						content : '关键信息不可为空',
						showCancel : false
					})
					return ;
				}
				var param = {'title':this.name,'intro':this.intro,'content':JSON.stringify(this.questions),'status':this.pubBool?1:0};
				this.$post(this.enrollurl + '/enroll/saveTemplet',param,function(res){
					var data = res.data;
					if(data.code != 0){
						uni.showModal({
							title : '错误',
							content : data.message,
							showCancel : false
						})
						return ;
					}
					uni.navigateTo({
						url : 'templetMain'
					})
				})
			},
			changePubBool : function(e){
				this.pubBool = e.target.value;
			}
		}
	}
</script>

<style>
	/* textarea{
		border: 50px;
		border-color: aqua
	} */
	.templet-view{
		width: 100%;
		flex-direction: column;
	}
	.center-view{
		width:100%;
		display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
	}
	input{
		margin-top:25upx;
		margin-bottom: 25upx;
		/* background-color: rgba(231, 226, 226, 0.568); */
		
		height:40upx;
		width: 500upx;
		padding: 20upx;
		padding-left: 30upx;
		border-radius: 50upx;
		/* border-bottom: 1upx solid black; */
	}
	textarea{
		/* margin-top:4upx;
		background-color: aqua; */
		margin-top:25upx;
		margin-bottom: 25upx;
		width: 500upx;
		height:250upx;
		/* background-color: rgba(231, 226, 226, 0.568); */
		padding: 20upx;
		padding-left: 30upx;
		border-radius: 50upx;
	}
	.visibility{
		width: 500upx;
		position: relative;
		/* background-color: rgba(231, 226, 226, 0.568); */
		padding: 20upx;
		padding-left: 30upx;
		border-radius: 50upx;
	}
	.vis-desc{
		color: gray;
	}
	.vis-switch{
		position: absolute;
		right: 0upx;
	}
	.templet-button{
		margin-top: 20upx;
		background-color: blue;
		width: 440upx; 
		border-radius: 50upx;
	}
	.templet-board{
		margin-top: 20upx;
		width:80%;
	}
</style>
